<template>
	<view class="flex-col page">
		<!--    <view class="flex-col section">
      <view class="flex-row justify-between self-stretch">
        <image class="image" @click="gobacks" src="/static/assets4/d88d1ea18d9f1749015a1248bb8ed0fa.png" />
        <image class="image_2" src="/static/assets4/a1936d9d5e695c7fd62d724be4abfacc.png" />
      </view>
      <view class="flex-col justify-start items-center self-end text-wrapper mt-166">
        <text class="font">1/3</text>
      </view>
    </view> -->
		<view class="bgswipe ">
			<view class="swpe">
				<view class="uni-margin-wrap">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration">
						<swiper-item v-for="item in 3">
							<image class="baind" src="/static/acti/2.webp" mode="">
							</image>
						</swiper-item>

					</swiper>

					<view class="flex-col section ahus">
						<view class="flex-row justify-between self-stretch">
							<image class="image" @click="gobacks"
								src="/static/assets4/d88d1ea18d9f1749015a1248bb8ed0fa.png" />
							<image class="image_2" src="/static/assets4/a1936d9d5e695c7fd62d724be4abfacc.png" />
						</view>
						<!--  <view class="flex-col justify-start items-center self-end text-wrapper mt-166">
					    <text class="font">1/3</text>
					  </view> -->
					</view>
					<view class="flex-col section ahus2">

						<view class="flex-col justify-start items-center self-end text-wrapper mt-166">
							<text class="font">1/3</text>
						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="flex-col group">
			<view class="flex-col">
				<view class="flex-row items-center">

					<image class="shrink-0 image_3" src="/static/assets4/dd0eea012a8ae34b33342315b7ab8fb4.png" />
					<view class="flex-col flex-1 group_2">
						<view class="flex-row items-center">
							<text class="font_2 text">杨紫夏</text>
							<view class="flex-row items-center section_2 ml-7">
								<image class="shrink-0 image_4"
									src="/static/assets4/9ff611b19f94969c78319f4e39393cdb.png" />
								<text class="font_3 text_2 ml-3">22</text>
							</view>
						</view>
						<view class="flex-row mt-4">
							<view class="flex-col justify-start items-center shrink-0 text-wrapper_2">
								<text class="font text_3">空闲</text>
							</view>
							<view class="flex-col justify-start items-center flex-1 text-wrapper_3 ml-8">
								<text class="font_4 text_4">最早可约 2025/2/19 02:00</text>
							</view>
						</view>
					</view>
					<image class="shrink-0 image_5" src="/static/assets4/d84b1abafcbb6d91acb333aa64ba7304.png" />
				</view>
				<view class="flex-col mt-16">
					<view class="flex-col justify-start section_3">
						<view class="flex-row justify-between equal-division">
							<view class="flex-col items-center equal-division-item_1">
								<text class="font_5 text_26">5</text>
								<text class="font_4 text_6 mt-12">累计接单</text>
							</view>
							<view class="flex-col items-center equal-division-item">
								<text class="font_5 text_25">4.9</text>
								<text class="font_4 text_1 mt-12">评分</text>
							</view>
							<view class="flex-col items-center equal-division-item_3">
								<text class="font_5 text_5">5</text>
								<text class="font_4 text_27 mt-12">收藏</text>
							</view>
						</view>
					</view>
					<view class="flex-row justify-between section_4 mt-16" @click="gospaec">
						<view class="flex-col items-center self-start group_4">
							<text class="text_7">TA的动态空间</text>
							<text class="font_6 text_8 mt-11">更多精彩动态等你发现</text>
						</view>
						<view class="flex-col justify-start items-start relative group_3">
							<view class="section_5"></view>
							<view class="section_6 pos_2"></view>
							<image class="image_6 pos" src="/static/assets4/7067c9d9a26aec9a5264ac693aca188b.png" />
						</view>
					</view>
					<view class="flex-col section_7 mt-16">
						<view class="flex-col">
							<text class="self-start font_7 text_9">基本信息</text>
							<view class="flex-row self-stretch mt-10">
								<view class="flex-col justify-start items-center text-wrapper_4">
									<text class="font_3 text_10">167cm</text>
								</view>
								<view class="flex-col justify-start items-center text-wrapper_5 ml-16">
									<text class="text_11">49kg</text>
								</view>
							</view>
							<view class="flex-row justify-between self-stretch group_5 mt-10">
								<view class="flex-row items-center">
									<text class="font_4 text_12">国籍</text>
									<image class="shrink-0 image_7 ml-7"
										src="/static/assets4/71180361537088fcf9ed295a551dae79.png" />
								</view>
								<view class="flex-row items-center group_6">
									<text class="font_4 text_13">语言</text>
									<image class="shrink-0 image_7 ml-7"
										src="/static/assets4/71180361537088fcf9ed295a551dae79.png" />
									<image class="shrink-0 image_7 ml-7"
										src="/static/assets4/1361b4fda0072d09934dd78e986320f4.png" />
									<image class="shrink-0 image_7 ml-7"
										src="/static/assets4/0b9d23351a64fc985ae56256b1db4347.png" />
								</view>
							</view>
						</view>
						<view class="flex-col group_1 mt-24">
							<text class="self-start font_7 text_14">自我介绍</text>
							<text class="self-stretch text_15 mt-12">
								却墩溜血茁缓挑皇肚，缴报功尊牌费川鸡辟翁穿伯锋疾漠蜗绑变捷玲仅反歌由。晒顿督锄疤雏演行聪徐卷维和贺耦戏涡读杠保奥链贷顿榨*准秀豪颤刀宴凿舍谴兰倦评销京摇…
							</text>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-col group_7">
				<text class="self-start font_2 text_16">TA的评价</text>
				<view class="flex-row self-stretch mt-21">
					<view class="flex-row flex-1">
						<image class="shrink-0 self-start image_8"
							src="/static/assets4/8010b534c38aee6d3a100aaedf4e6820.png" />
						<view class="flex-col items-start flex-1 group_9 ml-13">
							<text class="font_7">黄南藏族吴彦祖</text>
							<text class="font_8 text_17 mt-10">小姐姐很热情，性格很好</text>
							<text class="font_6 mt-10">2025/2/18 22:45</text>
						</view>
					</view>
					<view class="flex-row shrink-0 self-start group_8 ml-20">
						<image class="image_9" src="/static/assets4/dd430ba03e1bc99682a6302243029968.png" />
						<image class="image_9 ml-2" src="/static/assets4/dd430ba03e1bc99682a6302243029968.png" />
						<image class="image_9 ml-2" src="/static/assets4/dd430ba03e1bc99682a6302243029968.png" />
						<image class="image_9 ml-2" src="/static/assets4/dd430ba03e1bc99682a6302243029968.png" />
						<image class="image_9 ml-2" src="/static/assets4/dd430ba03e1bc99682a6302243029968.png" />
					</view>
				</view>
				<view class="flex-row justify-between self-stretch mt-21">
					<view class="flex-row">
						<image class="self-start image_8" src="/static/assets4/8010b534c38aee6d3a100aaedf4e6820.png" />
						<view class="flex-col items-start group_11 ml-13">
							<text class="font_7">黄南藏族吴彦祖</text>
							<text class="font_8 text_18 mt-10">小姐姐很热情，性格很好</text>
							<text class="font_6 mt-10">2025/2/18 22:45</text>
						</view>
					</view>
					<view class="flex-row self-start group_10">
						<image class="image_9" src="/static/assets4/dd430ba03e1bc99682a6302243029968.png" />
						<image class="image_9 ml-2" src="/static/assets4/dd430ba03e1bc99682a6302243029968.png" />
						<image class="image_9 ml-2" src="/static/assets4/dd430ba03e1bc99682a6302243029968.png" />
						<image class="image_9 ml-2" src="/static/assets4/dd430ba03e1bc99682a6302243029968.png" />
					</view>
				</view>
			</view>
			<view class="flex-row group_12">
				<view class="flex-col justify-start items-center text-wrapper_6">
					<text class="font_2 text_19">加为好友</text>
				</view>
				<view class="flex-col justify-start items-center text-wrapper_7 ml-31" @click="goyue">
					<text class="font_2 text_20">预约</text>
				</view>
			</view>
		</view>



		<up-overlay :show="showwer" @click="showwer = false"
			style="display: flex;align-items: center;justify-content: center;">
			<view class="pouper" @tap.stop>

				<view class="rosh">
					<image @click="showwer" src="/static/dazi/clos.png" mode=""></image>
				</view>
				<view class="shudcode">
					预约陪玩
				</view>

				<view class="nsseme">
					<image class="acat" src="/static/assets/082ca53ffbb26b742c57ba875c26e216.png" mode=""></image>
					<view class="namsxh">
						<view class="conlejs">
							<view class="rosj">
								<text class="nmsh">我的名字</text>
								<text class="yhsd">已售 123</text>
							</view>
							<view class="deits">
								这是我的一点加合计，大白熊合适的卡壳了
							</view>
							<view class="mkas">
								<image src="/static/dazi/Diamond.png" mode=""></image>
								<view class="npeis">
									 122/份
								</view>
								<view class="jish">
								    	(1份=1h)
								</view>
							</view>
						</view>
					</view>
				</view>


		

				<view class="busnd btnact ash" @click="enyue">
					确认下单
				</view>



			</view>
		</up-overlay>

	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				showwer: false,

				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500
			};
		},

		methods: {
			// 去预约
			goyue() {
				this.showwer = true
			
			},
			enyue(){
				uni.navigateTo({
					url: '/pages/play/reser'
				})
				this.showwer = false
			},
			// 去空间
			gospaec() {
				uni.navigateTo({
					url: '/pages/play/space'
				})
				
			},
			gobacks() {
				// #ifdef H5
				history.back();
				// #endif

				// #ifdef APP
				uni.navigateBack()
				// #endif	
			},
		},
	};
</script>

<style scoped lang="scss">
	.btnact {
		background-color: #fb75d6 !important;
	}

	.ash {
		margin-top: 30rpx !important;
	}

	.busnd {
		margin: 100rpx 0 30rpx;
		background-color: rgba(255, 154, 233, 0.4);
		height: 110rpx;
		text-align: center;
		line-height: 110rpx;
		border-radius: 100rpx;
		color: #fff;
		font-size: 32rpx;
	}

	.pouper {
		background-color: #fff;
		width: 640rpx;

		padding: 30rpx;
		border-radius: 30rpx;
	}

	.rosh {
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.seacus {
		display: flex;
		align-items: center;
	}

	.z1 {
		color: rgba(251, 117, 214, 1) !important;
	}

	.serins {
		text {
			color: rgba(131, 116, 135, 1);
			font-size: 24rpx;
		}
	}

	.isehd {
		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.u-transition {
		backdrop-filter: blur(3px);
		background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) -30%, rgba(255, 255, 255, 0) 50%);

	}

	.shudcode {
		color: 32rpx;
		font-size: 32rpx;
		text-align: center;
		color: #2A222F;
	}


	.co {
		color: rgba(195, 176, 195, 1);
		font-size: 28rpx;
	}

	.iosld {
		margin: 50rpx 0;
		// display: flex;
		// align-items: center;
		// justify-content: space-between;

		input {
			margin-right: 20rpx;
			padding: 0 20rpx;
			height: 100rpx;
			border: 1px solid rgba(237, 229, 237, 1);
			border-radius: 30rpx;

		}

		.ksbq {
			display: flex;
			flex-direction: column;
			align-items: flex-end;

			image {
				border: 1px solid #ccc;
				width: 240rpx;
				height: 100rpx;
			}

			.tsye {
				margin: 20rpx 0;
				color: rgba(251, 117, 214, 1);
				font-size: 24rpx;
			}
		}

	}

	.nsseme {
		margin: 40rpx 0 80rpx;
		display: flex;

		align-items: center;

		.acat {
			margin: 30rpx 0 10rpx;
			width: 160rpx;
			height: 160rpx;
			border-radius: 30rpx;
		}

		.namsxh {
			width: 70%;
			height: 160rpx;
		}

		.conlejs {
			padding-left: 20rpx;
			
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.mkas {
				height: 32rpx;
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
				}

				.npeis {
					padding: 0 4rpx;
					color: #FB75D6;
					font-size: 28rpx;
					font-weight: bold;
				}

				.jish {
					color: #C3B0C3;
					font-size: 24rpx;
				}
			}

			.deits {
				margin-top: -20rpx;
				// width: 100rpx;
				color: #837487;
				font-size: 24rpx;
				overflow: hidden;

				text-overflow: ellipsis; //文本溢出显示省略号

				white-space: nowrap; //文本不会换行
			}

			.rosj {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.nmsh {
				color: #2A222F;
				font-size: 32rpx;
				font-weight: bold;
			}

			.yhsd {
				color: #C3B0C3;
				font-size: 24rpx;
			}
		}
	}

	.cojsh {
		display: flex;
		align-items: center;
		justify-content: center;

		.hsye {
			color: #2A222F;
			font-size: 24rpx;
		}

		image {
			margin-right: 10rpx;
			width: 32rpx;
			height: 32rpx;
		}
	}


	.cojms {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		/* 创建3列，每列宽度相同 */
		grid-auto-rows: minmax(50px, auto);
		/* 设置行高，根据需要调整 */
		gap: 10px;

		/* 可选：设置网格项之间的间距 */
		.chusg {
			width: 200rpx !important;
			height: 200rpx !important;
			border-radius: 24rpx;
		}
	}



	.ahus2 {
		position: absolute !important;
		// left: 0 ;
		right: 0;
		bottom: 0;
	}

	.ahus {
		position: absolute !important;
		left: 0;
		right: 0;
		top: 0;
	}

	.baind {
		width: 100% !important;
		height: 100%;
		border-radius: 0 0 30rpx 30rpx;
	}

	.uni-margin-wrap {
		// width: 690rpx;
		width: 100%;
		height: 560rpx;
		position: relative;
	}

	.swiper {
		height: 560rpx;
		border-radius: 0 0 30rpx 30rpx;
	}

	.swiper-item {
		border-radius: 0 0 30rpx 30rpx;
		// display: block;
		height: 560rpx;
		line-height: 560rpx;
		text-align: center;
	}


	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.mt-166 {
		margin-top: 332rpx;
	}

	.ml-3 {
		margin-left: 6rpx;
	}

	.mt-11 {
		margin-top: 22rpx;
	}

	.ml-7 {
		margin-left: 14rpx;
	}

	.mt-21 {
		margin-top: 42rpx;
	}

	.ml-13 {
		margin-left: 26rpx;
	}

	.ml-31 {
		margin-left: 62rpx;
	}

	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.section {
			padding: 40rpx;
			// padding: 112rpx 40rpx 72rpx;


			.image {
				width: 48rpx;
				height: 48rpx;
			}

			.image_2 {
				border-radius: 10rpx;
				width: 48rpx;
				height: 48rpx;
			}

			.text-wrapper {
				padding: 12.32rpx 0 13.6rpx;
				background-color: #2a222f99;
				border-radius: 64rpx;
				width: 90rpx;
			}
		}

		.group {
			padding: 40rpx 40rpx 76rpx;

			.image_3 {
				border-radius: 64rpx;
				width: 96rpx;
				height: 96rpx;
			}

			.group_2 {
				margin-left: 24rpx;

				.text {
					line-height: 29.4rpx;
				}

				.section_2 {
					padding: 12rpx 16rpx;
					background-color: #f7eff8;
					border-radius: 24rpx;
					height: 48rpx;

					.image_4 {
						width: 24rpx;
						height: 24rpx;
					}

					.text_2 {
						color: #fb75d6;
					}
				}

				.text-wrapper_2 {
					padding: 8.2rpx 0 9.58rpx;
					background-color: #34c759;
					border-radius: 24rpx;
					width: 96rpx;
					height: 40rpx;

					.text_3 {
						line-height: 22.22rpx;
					}
				}

				.text-wrapper_3 {
					padding: 8.32rpx 0 9.56rpx;
					background-color: #f7eff8;
					border-radius: 24rpx;
					height: 40rpx;

					.text_4 {
						color: #b270f0;
						line-height: 22.12rpx;
					}
				}
			}

			.image_5 {
				margin-left: 40rpx;
				width: 44rpx;
				height: 44rpx;
			}

			.section_3 {
				background-color: #ffffff;
				height: 88rpx;

				.equal-division {
					padding-top: 2.7rpx;

					.equal-division-item_1 {
						padding: 10.44rpx 0 5.5rpx;
						width: 160.14rpx;

						.text_26 {
							line-height: 23.3rpx;
						}

						.text_6 {
							line-height: 22.28rpx;
						}
					}

					.equal-division-item {
						padding: 10rpx 0 5.6rpx;
						width: 160.14rpx;

						.text_25 {
							line-height: 23.74rpx;
						}

						.text_1 {
							line-height: 21.82rpx;
						}
					}

					.font_5 {
						font-size: 32rpx;
						font-family: PingFang SC;
						line-height: 22.08rpx;
						font-weight: 700;
						color: #2a222f;
					}

					.equal-division-item_3 {
						padding: 10.44rpx 0 5.56rpx;
						width: 160.14rpx;

						.text_5 {
							line-height: 23.3rpx;
						}

						.text_27 {
							line-height: 22.06rpx;
						}
					}
				}
			}

			.font_4 {
				font-size: 24rpx;
				font-family: PingFang SC;
				line-height: 22.08rpx;
				color: #837386;
			}

			.section_4 {
				padding: 32rpx 40rpx 0 40.96rpx;
				background-color: #2a222f;
				border-radius: 32rpx;

				.group_4 {

					// margin-top: 21.56rpx;
					.text_7 {
						color: transparent;
						font-size: 40rpx;
						// font-family: YouSheBiaoTiHei;
						// line-height: 28.8rpx;
						background-image: linear-gradient(146.2deg, #fb75d6 53.8%, #b270f0 95.3%);
						-webkit-background-clip: text;
					}

					.text_8 {
						font-weight: 700;
						line-height: 22.56rpx;
					}
				}

				.group_3 {
					width: 222rpx;

					.section_5 {
						background-image: linear-gradient(180deg, #83738699 -45.1%, #2a222f00 79.8%);
						border-radius: 32rpx 32rpx 0rpx 0rpx;
						width: 136rpx;
						height: 144rpx;
					}

					.section_6 {
						background-image: linear-gradient(180deg, #83738666 -20.8%, #2a222f00 85.4%);
						border-radius: 32rpx 32rpx 0rpx 0rpx;
						width: 120rpx;
						height: 96rpx;
					}

					.pos_2 {
						position: absolute;
						right: 8rpx;
						top: 48rpx;
					}

					.image_6 {
						border-radius: 40rpx;
						width: 48rpx;
						height: 48rpx;
					}

					.pos {
						position: absolute;
						right: 0;
						top: 32rpx;
					}
				}
			}

			.section_7 {
				padding: 38.76rpx 32rpx 31.16rpx;
				background-color: #ffffff;
				border-radius: 32rpx;
				box-shadow: 0rpx 8rpx 32rpx #83738633;

				.text_9 {
					line-height: 26.18rpx;
				}

				.text-wrapper_4 {
					padding: 14.52rpx 0 15.66rpx;
					background-color: #f7eff8;
					border-radius: 24rpx;
					width: 110rpx;
					height: 48rpx;

					.text_10 {
						color: #b270f0;
						line-height: 17.8rpx;
					}
				}

				.text-wrapper_5 {
					padding: 14.52rpx 0 10.92rpx;
					background-color: #f7eff8;
					border-radius: 24rpx;
					width: 90rpx;
					height: 48rpx;

					.text_11 {
						color: #b270f0;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 700;
						line-height: 22.56rpx;
					}
				}

				.group_5 {
					padding: 0 2.14rpx;

					.text_12 {
						line-height: 22.24rpx;
					}

					.image_7 {
						width: 64rpx;
						height: 64rpx;
					}

					.group_6 {
						margin-right: 51.86rpx;

						.text_13 {
							line-height: 22.24rpx;
						}
					}
				}

				.group_1 {
					margin-right: 2.96rpx;

					.text_14 {
						margin-left: 3.34rpx;
						line-height: 26.12rpx;
					}

					.text_15 {
						color: #837386;
						font-size: 28rpx;
						font-family: PingFang SC;
						line-height: 40rpx;
					}
				}
			}

			.font_3 {
				font-size: 24rpx;
				font-family: PingFang SC;
				line-height: 17.48rpx;
				font-weight: 700;
			}

			.group_7 {
				margin-top: 73.64rpx;

				.text_16 {
					line-height: 29.8rpx;
				}

				.image_8 {
					border-radius: 80rpx;
					width: 96rpx;
					height: 96rpx;
				}

				.group_9 {
					margin-top: 6.7rpx;

					.text_17 {
						line-height: 23.96rpx;
					}
				}

				.group_8 {
					margin-right: 8rpx;
				}

				.group_11 {
					margin-top: 6.7rpx;

					.text_18 {
						line-height: 23.96rpx;
					}
				}

				.font_8 {
					font-size: 24rpx;
					font-family: PingFang SC;
					line-height: 22.08rpx;
					color: #2a222f;
				}

				.group_10 {
					margin-right: 8rpx;
				}

				.image_9 {
					border-radius: 10rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}

			.font_2 {
				font-size: 32rpx;
				font-family: PingFang SC;
				line-height: 29.66rpx;
				font-weight: 700;
				color: #2a222f;
			}

			.font_7 {
				font-size: 28rpx;
				font-family: PingFang SC;
				line-height: 26.48rpx;
				font-weight: 700;
				color: #2a222f;
			}

			.font_6 {
				font-size: 24rpx;
				font-family: PingFang SC;
				line-height: 22.08rpx;
				color: #c2afc3;
			}

			.group_12 {
				margin-top: 53.6rpx;
				padding: 0 24rpx;

				.text-wrapper_6 {
					padding: 45.48rpx 0 40.44rpx;
					flex: 1 1 280rpx;
					background-color: #ffffff;
					border-radius: 80rpx;
					height: 120rpx;
					border: solid 2rpx #fb75d6;

					.text_19 {
						color: #fb75d6;
						line-height: 30.08rpx;
					}
				}

				.text-wrapper_7 {
					padding: 45.6rpx 0 44.74rpx;
					flex: 1 1 280rpx;
					background-image: linear-gradient(124.4deg, #fb75d6 53.8%, #b270f0 95.3%);
					border-radius: 80rpx;
					height: 120rpx;

					.text_20 {
						color: #ffffff;
					}
				}
			}
		}

		.font {
			font-size: 24rpx;
			font-family: PingFang SC;
			line-height: 22.08rpx;
			color: #ffffff;
		}
	}
</style>